<template>
  <div class="container">
    <div class="loginBox">
      <van-cell-group inset>
        <van-field v-model="username" label="用户名：" placeholder="请输入用户名" />
      </van-cell-group>
      <van-cell-group inset>
        <van-field v-model="password" label="密码：" placeholder="请输入密码" />
      </van-cell-group>
      <div class="logo">
        <img src="../assets/logo.png" alt="">
      </div>
      <div class="btnBox">
        <van-button type="primary" @click="loginBtn">登入</van-button>&nbsp;&nbsp;&nbsp;
        <van-button type="warning" @click="clearBox">清空</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { showNotify } from 'vant';
// import Toast from '@vant/weapp/toast/toast';
export default {
  name: 'MyLogin',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    loginBtn() {
      if(this.username === 'admin' && this.password === '123456') {
        this.$router.push('/home')
        this.username = '',
        this.password = ''
        // 设置 token 
        localStorage.setItem('token', 'Bearer xxx')
      } else {
        showNotify({ type: 'danger', message: '账号或密码错误！' });
        // Toast.fail('账号或密码错误！');
      }
    },
    clearBox() {
      this.username = ''
      this.password = ''
    }
  }
}
</script>

<style scoped>
  .container {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #384760;
  }
  .loginBox{
    position: absolute;
    /* padding-top: 50px; */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 300px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .logo{
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    border-radius: 50%;
    overflow: hidden;
    z-index: 999;
    background-color: white;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .btnBox {
    margin-top: 10px;
  }
</style>